<template>
	<w-container id='regift-record' class="page-bg">
		<w-navbar navType="default" id="my-nav" title="转赠记录"></w-navbar>
		<u-sticky>
			<view class="tabs-contaienr flex flex-js-center ptb-16">
				<w-tabs :current='currentIndex' :tabList='tabs' @change='changeTab'></w-tabs>
			</view>
		</u-sticky>
		<view class="list plr-16">
			<view class="bg-color-item pt-12 plr-12 pb-16 br-12 mb-12" v-for="item in list" :key="item.id">
				<view class="flex">
					<w-image radius="12" width="83" height="83" :src="item.product.listimg"></w-image>
					<view class="info-bar flex flex-dir-col flex-js-sb" v-if="item.usercollection.types!=1">
						<text class="text-overflow-2 font-size-16 font-color-textPrimary font-w-500" style="width: 100%;">
							{{handleLang(item.product.name)}}
						</text>
						<view class="">
							<text class="font-size-10 font-color-999">编号：#</text>
							<text class="font-size-16 font-color-textPrimary">{{item.usercollection.collection_code}}</text>
							<text class="font-size-10 font-color-999">/{{item.product.total_num}}</text>
						</view>
					</view>
					<view class="info-bar flex flex-ai-center" v-else>
						<text class=" font-size-16 font-color-textPrimary font-w-500">
							{{handleLang(item.product.name)}}
						</text>
					</view>
				</view>
				<view class="font-size-14">
					<view class="mt-16 flex flex-js-sb">
						<text class="font-color-999">{{handleLang(search.types==1? '转赠时间':'转入时间')}}：</text>
						<text class="font-color-textPrimary">{{item.createtime|formatDate}}</text>
					</view>
					<view class="mt-16 flex flex-js-sb">
						<text class="font-color-999">{{handleLang(search.types==1? '接收人':'转赠人')}}：</text>
						<text  class="font-color-textPrimary">{{search.types==1? item.user.mobile:item.from_user.mobile}}</text>
					</view>
				</view>
			</view>
			
			
		</view>
		<w-loading :type="loadingType" empty-type="search" empty-top="200"></w-loading>
	</w-container>
</template>

<script>
	import {
		getGiveRecord
	} from '@/api/collection/index.js'
	export default {
		data() {
			return {
				tabs: [{
					name: '我转赠的',
					type: 1
				}, {
					name: "我收到的",
					type: 2
				}],
				search: {
					page: 1,
					types: 1,
				},
				list:[],
				loadingType: 'none'
			};
		},
		computed: {
			currentIndex() {
				return this.tabs.findIndex(v => v.type == this.search.types)
			}
		},
		onLoad() {
			this.changeTab({
				type: this.search.types
			})
		},
		onReachBottom() {
			let search=this.$tools.copyObj(this.search)
			search.page++
			this.getList(search);
		},
		onPullDownRefresh() {
			let search=this.$tools.copyObj(this.search)
			search.page = 1
			this.getList(search);
		},
		methods: {
			changeTab({
				type
			}) {
				this.search.page = 1
				this.search.types = type
				this.list = []
				this.loadingType = 'none'
				this.getList(this.search)
			},
			getList(search) {
				if(this.loadingType=='loading') return; 
				this.loadingType = 'loading'
				getGiveRecord(search).then(res => {
					uni.stopPullDownRefresh()
					this.loadingType = 'none'
					if(res.data.data.length){
						this.search=search;
					}
					this.list=this.list.concat(res.data.data);
					if(!res.data.total){
						this.loadingType='empty'
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	#regift-record {
		.tabs-contaienr {
			width: 750rpx;
			// background-image: url('@/static/bg/my-bg.png');
			background-size: 750rpx 100vh;
			background-position: 0 88rpx;
			background-repeat: no-repeat;

		}
		.info-bar {
			@extend .ptb-4,
			.pl-16,
			.flex-1;
		}
	}
</style>
